<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Obtrusive tabbed panels solution</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="lib/jquery-1.4.2.min.js"></script>
    <link type="text/css" rel="stylesheet" href="tabs.css" media="screen, projection">
  </head>
  <body>
    <h1>Obtrusive tabbed panels solution</h1>
    <div id="cont-1">
      <span class="tabs-nav tabs-selected"
            style="float: left; margin-right: 5px;">
        <span onclick="tabs = $('#cont-1 > .tabs-nav');
           tabs.removeClass('tabs-selected');
           $(this).parent().addClass('tabs-selected');
           var className = $(this).attr('class');
           var fragment_id = /fragment-\d/.exec(className);
           $('.tabs-container').addClass('tabs-hide');
           $('#'+fragment_id).removeClass('tabs-hide');"
              class="fragment-1 nav">
          Latest news
        </span>
      </span>
      <span class="tabs-nav"
            style="float: left; margin-right: 5px;">
        <span onclick="tabs = $('#cont-1 > .tabs-nav');
           tabs.removeClass('tabs-selected');
           $(this).parent().addClass('tabs-selected');
           var className = $(this).attr('class');
           var fragment_id = /fragment-\d/.exec(className);
           $('.tabs-container').addClass('tabs-hide');
           $('#'+fragment_id).removeClass('tabs-hide');"
              class="fragment-2 nav">
          Sports
        </span>
      </span>
      <span class="tabs-nav" style="float: left;">
        <span onclick="tabs = $('#cont-1 > .tabs-nav');
           tabs.removeClass('tabs-selected');
           $(this).parent().addClass('tabs-selected');
           var className = $(this).attr('class');
           var fragment_id = /fragment-\d/.exec(className);
           $('.tabs-container').addClass('tabs-hide');
           $('#'+fragment_id).removeClass('tabs-hide');"
              class="fragment-3 nav">
          Economy</span>
      </span>
    </div>
    <div class="tabs-container" id="fragment-1">
      <div class="tabbertab">
        <span style="margin: 0px 5px 0px 0px; float: left;">
          <strong>Latest news</strong>
        </span>
        <div>
          Latest news contents [...]
        </div>
      </div>
    </div>
    <div class="tabs-container tabs-hide" id="fragment-2">
      <div class="tabbertab">
        <span style="margin: 0px 5px 0px 0px; float: left;">
          <strong>Sports</strong>
        </span>
        <div>
          Sports contents [...]
        </div>
      </div>
    </div>
    <div class="tabs-container tabs-hide" id="fragment-3">
      <div class="tabbertab">
        <span style="margin: 0px 5px 0px 0px; float: left;">
          <strong>Economy</strong>
        </span>
        <div>
          Economy contents [...]
        </div>
      </div>
    </div>
  </body>
</html>
